<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <base href="/">
  <meta charset="UTF-8">
  <title>管理员账号管理</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <style>
    /* 新增表格容器样式 */
    .table-container {
      overflow: hidden;
      margin: 15px;
    }
    .layui-table tr{
      height: auto;
    }
    /* 单元格自适应高度 */
    .layui-table-cell {
      height: auto !important;
      min-height: 52px;
      white-space: normal;
      padding: 8px 10px;
      line-height: 1.5;
    }
    /* 操作按钮样式 */
    .layui-table-tool .layui-btn {
      margin: 2px;
      padding: 0 8px;
      height: 28px;
      line-height: 28px;
    }
    /* 操作按钮容器样式 */
    .layui-table-tool-temp {
      padding: 5px 0 !important;
    }
    /* 按钮统一样式 */
    .layui-table .layui-btn {
      min-width: 50px;
      height: 28px;
      line-height: 28px;
      padding: 0 8px;
      font-size: 12px;
      border-radius: 3px;
      white-space: nowrap;
    }
    /* 鼠标悬停效果 */
    .layui-table .layui-btn:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }

    /* 固定列样式覆盖 */
    .layui-table-fixed {
      box-shadow: -2px 0 6px rgba(0,0,0,.08);
    }
  </style>
</head>
<body>
<!--数据列表-->
<div class="table-container">
  <table class="layui-table" lay-data="{
            url:'admin/list',
            page:true,
            id:'adminlist',
            toolbar:'#admintoptools',
            scrollX: true,
            parseData: function(res){
                return {
                    code: res.code,
                    msg: res.msg,
                    count: res.count,
                    data: res.data
                };
            }
        }" lay-filter="adminlist">
    <thead>
    <tr>
      <th lay-data="{field:'adminid', width:100}">ID</th>
      <th lay-data="{field:'adminname', width:120}">管理员用户名</th>
      <th lay-data="{templet:'#adminimgTpl', width:120}">头像</th>
      <th lay-data="{toolbar:'#adminlinetools', width:180, fixed: 'right'}">操作</th>
    </tr>
    </thead>
  </table>
</div>

<!--头像列自定义模板-->
<script type="text/html" id="adminimgTpl">
  <img src="{{d.imgurl}}" style="height: 50px;width: 50px;">
</script>

<!--行内工具栏-->
<script id="adminlinetools" type="text/html">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-normal" lay-event="adminedit">编辑</button>
    <button class="layui-btn layui-btn-danger" lay-event="admindelete">删除</button>
  </div>
</script>
<!--头部工具栏-->
<script id="admintoptools" type="text/html">
  <div class="layui-form-item">
    <div class="layui-input-inline">
      <input type="text" name="admintext"  placeholder="请输入查询内容" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-inline">
      <button type="button" class="layui-btn" lay-event="admincheck">查询</button>
    </div>
    <div class="layui-input-inline">
      <button type="button" class="layui-btn" lay-event="adminregister">注册新管理员</button>
    </div>
  </div>
</script>

<!-- 注册新管理员表单 -->
<div id="admin-register-form" style="display: none;">
  <form class="layui-form" lay-filter="admin-register-form">
    <div class="layui-form-item">
      <label class="layui-form-label">管理员用户名</label>
      <div class="layui-input-block">
        <input type="text" name="adminname" lay-verify="required" placeholder="请输入管理员用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-block">
        <input type="password" name="adminpassword" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">确认密码</label>
      <div class="layui-input-block">
        <input type="password" name="confirmadminpassword" lay-verify="required" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">头像</label>
      <div class="layui-input-inline">
        <img src="easyfile/upload.jpeg" _id="adminaddupload" style="width: 100px;height: 100px;cursor: pointer">
        <input type="hidden" _id="adminaddimgurl" name="imgurl" lay-verify="adminimg">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="admin-register-submit">注册</button>
        <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
      </div>
    </div>
  </form>
</div>

<!--修改对话框-->
<div style="display:none" id="admineditWin" lay-filter="admineditWin" class="layui-form">
  <input name="adminid" type="hidden">
  <div class="layui-form-item">
    <label class="layui-form-label">管理员用户名</label>
    <div class="layui-input-inline">
      <input type="text" name="adminname" required lay-verify="required" placeholder="请输入管理员用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
      <input type="password" name="adminpassword" placeholder="不修改请留空" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">头像</label>
    <div class="layui-input-inline">
      <img src="easyfile/upload.jpeg" _id="adminaddupload" style="width: 100px;height: 100px;cursor: pointer">
      <input type="hidden" _id="adminaddimgurl" name="imgurl" lay-verify="adminimg">
    </div>
  </div>
  <div class="layui-form-item">
    <button type="button" lay-submit lay-filter="admineditsave" class="layui-btn">保存</button>
    <button type="button" class="layui-btn" id="admineditcancel">取消</button>
  </div>
</div>

<script src="layui/layui.all.js"></script>
<script>
  const $ = layui.$;
  const table = layui.table;
  const form = layui.form;
  const layer = layui.layer;
  const upload = layui.upload;

  // 获取管理员数据
  function getAdmins() {
    $.ajax({
      url: 'admin/list',
      success: function (result) {
        if (result && result.data) {
          const allAdmins = result.data;
          table.reload("adminlist", {
            data: allAdmins
          });
        } else {
          console.error('返回的数据格式不正确:', result);
          layer.msg('返回的数据格式不正确，请稍后重试', { icon: 2 });
        }
      },
      error: function (error) {
        console.error('获取管理员列表失败:', error);
        layer.msg('获取管理员列表失败，请稍后重试', { icon: 2 });
      }
    });
  }
  // 页面加载时获取管理员数据
  getAdmins();

  // 行内按钮监听事件
  table.on("tool(adminlist)", function (obj) {
    // 被点击按钮的lay-event属性值
    let event = obj.event;
    // 被点击按钮所在行的数据
    let data = obj.data;
    if (event === 'admindelete') {
      // 防止误操作
      layer.confirm("确认要删除吗？", function () {
        // 点击确认后要执行的代码
        console.log(data);
        $.ajax({
          url: 'admin/delete',
          data: { id: data.adminid },
          success: function () {
            // 提示信息
            layer.msg("删除成功", { time: 1800, icon: 1 });
            // 刷新表格信息
            getAdmins();
          }
        });
      });
    } else if (event === 'adminedit') {
      // 回显表单数据
      form.val("admineditWin", data);
      // 回显图片
      $("[_id='adminaddupload']").attr("src", data.imgurl);
      let editIndex = layer.open({
        type: 1,
        title: '编辑管理员',
        area: ['400px', '400px'],
        content: $("#admineditWin")
      });
      // 绑定编辑取消按钮事件
      $('#admineditcancel').on('click', function () {
        layer.close(editIndex);
      });
    }
  });

  // 头部按钮监听事件
  table.on("toolbar(adminlist)", function(obj) {
    let event = obj.event;
    if (event === 'admincheck') {
      // 获取输入框中的数据
      let text = $("[name='admintext']").val();
      // 发送到后端 layui表格加载
      getAdmins();
      table.reload("adminlist",{
        where:{text:text},
        page:{curr:1}
      });
    } else if (event === 'adminregister') {
      // 弹出注册表单
      layer.open({
        type: 1,
        title: '管理员注册',
        content: $('#admin-register-form'),
        area: ['400px', '350px'],
        success: function() {
          form.render();
        }
      });
    }
  });

  // 监听注册表单提交事件
  form.on('submit(admin-register-submit)', function(data) {
    if (data.field.adminpassword!== data.field.confirmadminpassword) {
      layer.msg('两次输入的密码不一致', { icon: 2 });
      return false;
    }
    const admin = {
      adminname: data.field.adminname,
      adminpassword: data.field.adminpassword,
      imgurl: data.field.imgurl
    };
    const confirmadminpassword = data.field.confirmadminpassword;
    const requestData = {
      admin: admin,
      confirmadminpassword: confirmadminpassword
    };
    $.ajax({
      url: 'admin/register',
      type: 'POST',
      contentType: 'application/json',
      data: JSON.stringify(requestData),
      success: function(result) {
        if (result.code === 200) {
          layer.msg('注册成功', { icon: 1 });
          layer.closeAll();
          getAdmins();
        } else {
          layer.msg(result.msg, { icon: 2 });
        }
      },
      error: function(error) {
        layer.msg('注册失败，请稍后重试', { icon: 2 });
      }
    });
    return false;
  });

  // 文件上传
  upload.render({
    elem: "[_id='adminaddupload']",
    url: "file/upload",
    done: function (result) {
      console.log(result.data[0].src);
      let url = result.data[0].src;
      $("[_id='adminaddupload']").attr("src", url);
      $("[_id='adminaddimgurl']").val(url);
    },
    error: function () {
      layer.msg("上传失败", { icon: 2 });
    }
  });

  // 编辑保存提交按钮事件
  form.on("submit(admineditsave)", function (data) {
    // data.field 表单数据
    $.ajax({
      url: "admin/edit",
      data: data.field,
      success: function (result) {
        if (result.code === 200) {
          // 关闭掉本窗口
          layer.closeAll();
          // 提示成功
          layer.msg("编辑成功", { icon: 1, time: 1800 });
          // 刷新表格
          getAdmins();
        } else {
          layer.msg(result.msg, { icon: 2 });
        }
      }
    });
    return false;
  });

  /*自定义表单规范*/
  form.verify({
    adminimg: function (value, item) {
      // value  表单组件中填入的值
      // item   对应的表单组件
      if (!value) {
        return "必须上传图片";
      }
    }
  });
</script>
</body>
</html>